<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户&渠道管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品名称管理</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-mb15">
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            filterable
            clearable
            placeholder="请输入产品名称"
            v-model="filter.productName"
          >
            <el-option
              v-for="(item, index) in productNameOptions"
              :key="index"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            filterable
            clearable
            placeholder="请输入产品类型"
            v-model="filter.type"
            @change="productTypeChange(filter, 'filter')"
          >
            <el-option
              v-for="(item, index) in PRODUCT_TYPE_OPTION"
              :key="index"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="isPackageName(filter.type)">
          <el-select
            size="mini"
            class="u-w160"
            filterable
            clearable
            placeholder="请输入产品包名"
            v-model="filter.packageName"
          >
            <el-option
              v-for="(item, index) in packageNameOptions"
              :key="index"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            @click="createProductName"
          >新增</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>
      <el-table
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <span
              @click="editProductName(scope.row)"
              class="u-cursor"
            >编辑</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 50, 100, 500]"
        :page-size="page.limit"
        :total="tableTotal"
      >
      </el-pagination>
    </Container>

    <!-- 新增/编辑产品名称 -->
    <el-dialog
      :title="productNameDialogTitle"
      width="430px"
      :visible.sync="productNameVisible"
      @closed="resetValidate"
    >
      <el-form
        label-width="90px"
        label-position="right"
        ref="productNameForm"
        :model="productNameData"
        :rules="productNameRules"
      >
        <el-form-item
          label="产品名称"
          required
          prop="productName"
        >
          <el-input
            class="u-w300"
            placeholder="请输入产品名称"
            v-model="productNameData.productName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品类型"
          required
          prop="type"
        >
          <el-select
            class="u-w300"
            placeholder="请选择产品类型"
            v-model="productNameData.type"
            @change="productTypeChange(productNameData, 'dialog')"
          >
            <el-option
              v-for="(item, index) in PRODUCT_TYPE_OPTION"
              :key="index"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="产品包名"
          v-show="isPackageName(productNameData.type)"
        >
          <el-input
            class="u-w300"
            placeholder="请输入产品包名"
            v-model="productNameData.packageName"
          ></el-input>
        </el-form-item>
        <el-form-item
          align="center"
          label-width="0"
          class="u-mb0"
        >
          <el-button
            size="small"
            type="primary"
            @click="executeProductName"
          >确定</el-button>
          <el-button
            size="small"
            @click="productNameVisible = false"
          >关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";

import { PRODUCT_TYPE_OPTION } from "@/assets/js/customer-option";
export default {
  name: "cpa-product-name",
  components: {
    Container,
    CustomTableColumn
  },
  data() {
    return {
      PRODUCT_TYPE_OPTION,

      // 下拉
      packageNameOptions: [],
      productNameOptions: [],

      // 搜索，初始化undefined是为了利用一下axios不会序列化，接口不传表示全部
      filter: {
        productName: undefined,
        type: undefined,
        packageName: undefined
      },

      // 新增/编辑弹窗
      productNameType: "create",
      productNameVisible: false,
      productNameData: {},
      productNameRules: {
        productName: {
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error("请输入产品名称"));
            } else {
              callback();
            }
          },
          trigger: ["blur", "change"]
        },
        type: {
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error("请选择产品类型"));
            } else {
              callback();
            }
          },
          trigger: ["blur", "change"]
        }
      },

      // 表格
      tableColumn: [
        {
          prop: "productName",
          label: "产品名称",
          visible: true
        },
        {
          prop: "type",
          label: "产品类型",
          visible: true
        },
        {
          prop: "packageName",
          label: "产品包名",
          visible: true
        }
      ],
      tableData: [],
      tableTotal: 0,
      page: {
        curPage: 1,
        limit: 20
      }
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    },
    productNameDialogTitle() {
      switch (this.productNameType) {
        case "create":
          return "新增";
        case "edit":
          return "编辑";
      }
      return "";
    }
  },
  methods: {
    // 产品名称
    getProductNameOptions() {
      this.$http({
        method: "get",
        url: "/cpa/api/customer_product_name/all_product_name"
      }).then(res => {
        this.productNameOptions = res.data.list || [];
      });
    },
    // 产品包名
    getPackageNameOptions() {
      this.$http({
        method: "get",
        url: "/cpa/api/customer_product_name/all_package_name"
      }).then(res => {
        this.packageNameOptions = res.data.list || [];
      });
    },
    getTable() {
      this.$http({
        method: "get",
        url: "/cpa/api/customer_product_name/query",
        params: {
          ...this.page,
          ...this.filter
        }
      }).then(res => {
        this.tableData = res.data.list || [];
        this.tableTotal = res.data.total || 0;
      });
    },
    search() {
      this.page.curPage = 1;
      this.getTable();
    },
    // 弹窗
    createProductName() {
      this.productNameVisible = true;
      this.productNameType = "create";
      this.productNameData = {
        productName: "",
        packageName: "",
        type: ""
      };
    },
    editProductName({ id, productName, packageName, type }) {
      this.productNameVisible = true;
      this.productNameType = "edit";
      this.productNameData = {
        id,
        productName,
        packageName,
        type
      };
    },
    addProductName() {
      this.$refs["productNameForm"].validate(valid => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/cpa/api/customer_product_name/add",
            data: this.productNameData
          }).then(res => {
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.initPage();
              this.productNameVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          });
        }
      });
    },
    updateProductName() {
      this.$refs["productNameForm"].validate(valid => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/cpa/api/customer_product_name/update",
            data: this.productNameData
          }).then(res => {
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "更新成功"
              });
              this.initPage();
              this.productNameVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          });
        }
      });
    },
    executeProductName() {
      switch (this.productNameType) {
        case "create":
          this.addProductName();
          break;
        case "edit":
          this.updateProductName();
          break;
      }
    },
    resetValidate() {
      this.$refs["productNameForm"].resetFields();
    },
    // 产品类型改变
    productTypeChange(obj, type) {
      if (!this.isPackageName(obj.type)) {
        obj.packageName = type === "filter" ? undefined : "";
      }
    },
    // 是否需要包名
    isPackageName(value) {
      return !["H5", "互动广告", "小程序", "下架"].includes(value);
    },
    // 分页
    handleCurrentChange(val) {
      this.page.curPage = val;
      this.getTable();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getTable();
    },
    initPage() {
      this.getProductNameOptions();
      this.getPackageNameOptions();
      this.getTable();
    }
  },
  created() {
    this.initPage();
  }
};
</script>
